<template>
   
    <div>
      <Transition name="slide-fade" mode="out-in">
        <h1 v-if="show">show</h1>
        <h2 v-else>else</h2>
      </Transition>
  
       <!-- <el-collaps-transition>
              <h1 v-if="show">show</h1>
          </el-collaps-transition>  -->
  
      <el-button @click="show = !show">toggle</el-button>
    </div>
   
  
    <!-- <div>
      <router-view v-slot="{ Component }">
        <transition name="slide-fade" mode="out-in">
          <keep-alive :include="cachedViews">
            <component :is="Component" />
          </keep-alive>
        </transition>
      </router-view>
    </div> -->
  
    <!-- <div>
      <teleport to="body">   
        <h1>xxxxx</h1>
      </teleport>
    </div> -->
  
    <!-- <div> 
      <h1 ref="hh">xx</h1>
      <!-- 按钮组件  使用ref绑定到组件实例上 
      <el-button ref="btn">   
          click me
      </el-button>
    </div>
  -->
  </template>
  
  <script>
  export default {
    name: "transition-page",
  
    data() {
      return {
        show: true,
      };
    },
    methods:{
      fn(){
          console.log(this.$refs.btn.size);   // 按钮的大小
          console.log(this.$refs.hh);
      }
    }
  };
  </script>
  
  <style scoped>
  /**进入动画 */
  .slide-fade-leave-from {
    transform: translateX(100px);
    opacity: 0;
  }
  .slide-fade-leave-active {
    transition: all 0.5s ease-in-out;
  }
  .slide-fade-leave-to {
    transform: translateX(0);
    opacity: 1;
  }
  
  /**离开动画*/
  .slide-fade-leave-from {
    transform: translateX(0);
    opacity: 1;
  }
  .slide-fade-leave-active {
    transition: all 0.5s ease-in-out;
  }
  .slide-fade-leave-to {
    transform: translateX(100px);
    opacity: 0;
  }
  </style>
  